<template>
  <div class="journal oa-bgcolor">
    <div class="btn-select">
      <div class="select-group">
        <label>审批流程</label>
        <el-select v-model="categoryType" placeholder="请选择" size="mini">
          <el-option
            v-for="item in categoryOptions"
            :key="item.category_id"
            :label="item.title"
            :value="item.category_id"
          />
        </el-select>
      </div>
      <el-button type="primary" class="new-btn" @click="newBtn">新建审批</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane :name="item.key" v-for="(item, index) in tabsData" :key="index">
        <el-badge
          slot="label"
          :hidden="item.key != 'examine' || messageOANum.examineNum == 0"
          :max="99"
          :value="messageOANum.examineNum"
        >
          <span>{{ item.label }}</span>
        </el-badge>
        <v-content
          :by="item.key"
          :category_id="categoryType"
          :ref="'tabcontent' + item.key"
          id="examine-list-box"
          @reset="reset"
          @edit="editDetail"
        />
      </el-tab-pane>
    </el-tabs>
    <examine-category-select
      :show="showCategorySelect"
      @select="selcetExamineCategory"
      @close="showCategorySelect = false"
    />
    <examine-create-view
      v-if="isCreate"
      :category_id="createInfo.category_id"
      :category_title="createInfo.title"
      :action="createAction"
      @save-success="createSaveSuccess"
      @hiden-view="hideView"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { oaExamineCategoryList } from "@/api/oamanagement/examine"; // 审批类型数据
import VContent from "./components/content";
import ExamineCategorySelect from "./components/examineCategorySelect";
import ExamineCreateView from "./components/examineCreateView";

export default {
  components: {
    VContent,
    ExamineCategorySelect,
    ExamineCreateView,
  },

  data() {
    return {
      loading: false,
      activeName: "my",
      tabsData: [
        { label: "我发起的", key: "my" },
        { label: "我审批的", key: "examine" },
      ],
      // 审批类型
      categoryType: "",
      categoryOptions: [],
      // 新建
      showCategorySelect: false,
      isCreate: false, //是创建
      createAction: { type: "save" },
      createInfo: {}, // 创建所需要的id 标题名信息
    };
  },

  computed: {
    ...mapGetters(["messageOANum"]),
  },

  mounted() {
    this.getExamineCategoryList();
  },

  methods: {
    // 审批类型列表
    getExamineCategoryList() {
      this.loading = true;
      oaExamineCategoryList()
        .then((res) => {
          this.loading = false;
          this.categoryOptions = [{ category_id: "", title: "全部" }].concat(res.data);
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 重置按钮
    reset() {
      this.categoryType = "";
    },

    editDetail(item) {
      item.title = item.category_name;
      this.createInfo = item;
      this.createAction = { type: "update", id: item.examine_id, data: item };
      this.isCreate = true;
    },

    // 创建
    newBtn() {
      this.showCategorySelect = true;
    },

    // 审批类型选择
    selcetExamineCategory(item) {
      this.createInfo = item;
      this.createAction = { type: "save" };
      this.isCreate = true;
    },

    createSaveSuccess() {
      this.$refs.tabcontentmy[0].searchBtn();
    },

    hideView() {
      this.isCreate = false;
    },

    tabClick(val) {},
  },
};
</script>

<style scoped lang="scss">
@import "../styles/tabs.scss";

.journal {
  overflow: auto;
  position: relative;
  .btn-select {
    position: absolute;
    top: 10px;
    right: 40px;
    z-index: 999;
    .select-group {
      display: inline-block;
      .el-select {
        margin: 0 20px 0 10px;
        width: 116px;
      }
    }
  }
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs /deep/ .el-tabs__content {
    padding: 0 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-tab-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
}

// 消息效果
.el-badge /deep/ .el-badge__content.is-fixed {
  top: 15px;
}
</style>
